Day 03：【HTML 實作】語意化標籤建立網頁骨架和增加無障礙設計

2026 iThome 鐵人賽

DAY 3

自我挑戰組

Vscode 實作：用 HTML/CSS/JS 打造醫藥健康小工具箱系列第 3 篇

18th鐵人賽

meei13

2026-09-16 21:57:59

51 瀏覽

分享至

本篇文章目錄

前言：別再滿滿的 <div> 了！認識 HTML5 語意化標籤
單頁應用 (SPA) 核心架構與 DOM 規劃
關鍵區塊程式碼拆解：<header>、<main>、<section>
核心重點：為醫藥工具注入 a11y (Accessibility) 無障礙設計
明日預告與結語

一、前言：別再滿滿的 `<div>` 了！認識 HTML5 語意化標籤

在剛開始學習網頁切版時，我們很容易習慣用 <div> 包辦所有的區塊：

<!-- 傳統無語意的 Div Soup 寫法 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

雖然在瀏覽器渲染出來外觀一模一樣，但對於瀏覽器解析、搜尋引擎 (SEO) 以及螢幕閱讀器 (Screen Reader) 來說，這些全都是「沒有意義的方塊」。

因此在打造《醫藥健康小工具箱》時，我們採用 HTML5 語意化標籤 (Semantic Tags)。這就像在堆積木時給每個零件標上清晰的名稱，讓程式碼「看標籤就知道用途」：

<header>：頁面頂端的標頭區塊（放置標題與簡介）。
<nav>：主導覽區塊（放置 4 大工具的分頁按鈕）。
<main>：頁面主要的內容核心（一個頁面只會有一個 <main>）。
<section>：獨立的功能或主題區塊（我們的 4 個小工具各自為一個 section）。
<footer>：頁面底部的頁腳區塊（放置免責聲明與版權資訊）。

二、單頁應用 (SPA) 核心架構與 DOM 規劃

什麼是單頁應用 (SPA)？

傳統網站點擊分頁時需要重新向伺服器請求頁面（畫面會白屏閃爍一下）；而單頁應用 (Single Page Application, SPA) 則是將所有工具結構寫在同一個 index.html 中，並透過 HTML5 原生的 hidden 屬性 或 CSS 類別控制顯示與隱藏。點擊分頁時完全不需要刷頁，能提供像手機 App 般流暢的無縫體驗！

我們的 DOM 階層結構規劃如下：

<body>
  ├── <header>         : 網站標題與馬卡龍風格 Icon
  ├── <nav>            : 4 大工具分頁按鈕 (Tab Navigation)
  ├── <main>           : 主要工具展示區
  │    ├── <section#tool1> : 生理指標計算器 (BMI/BMR/TDEE) [預設顯示]
  │    ├── <section#tool2> : 兒童用藥劑量換算器 [hidden 隱藏]
  │    ├── <section#tool3> : 每日用藥時間表生成器 [hidden 隱藏]
  │    └── <section#tool4> : 特殊藥品開瓶倒數計時器 [hidden 隱藏]
  └── <footer>         : 醫藥免責聲明與版權資訊

三、關鍵區塊程式碼拆解

1. 頂端標題與分頁導覽列 (`<header>` & `<nav>`)

2. 工具卡片獨立區塊與頁腳 (`<main>` & `<fooler>`)

因為這部分的程式碼有點多，所以就先不放完整截圖了，等到之後分別介紹各個工具的時候再來講解。

四、核心重點：為醫藥工具注入 a11y (Accessibility) 無障礙設計

為什麼「醫藥健康工具」特別需要注重 a11y？

醫療健康應用的使用者，高機率包含高齡長者、視力退化者或手部精密操作不便的族群。如果網站無法支援螢幕閱讀器或鍵盤操作，這些最需要健康輔助工具的使用者反而會被拒之門外。

我們在 HTML 骨架中融入了以下 3 個輕量且強大的無障礙設計巧思：

1. WAI-ARIA 屬性：補足分頁語意（螢幕閱讀器的眼睛）

傳統的 <button> 只能告訴輔具「這是一個按鈕」，但無法表達「這是一個頁籤，且目前正被開啟」。

role="tablist" 與 role="tab"：可以明確告知輔具這是一組頁籤選單。
aria-selected="true/false"：告訴螢幕閱讀器該頁籤的開關狀態。視障使用者聽到的不再只是「生理指標計算，按鈕」，而是：「生理指標計算，分頁，已選取」。

2. 表單 `<label>` 與 `<input>` 語意綁定（擴大點擊範圍）

在輸入框設計中，我們使用 for 與 id 進行一對一精準綁定：

<label for="height">身高 (cm)</label>
<input type="number" id="height" placeholder="例如：165">

無障礙好處：長輩點選文字「身高 (cm)」時，光標就會自動聚焦到數字輸入框內，不需要費力去瞄準小小的輸入框點擊！

3. 保留鍵盤 Focus 與色彩對比度（純鍵盤流暢操作）

鍵盤友善 (Focus Style)：我們後續在 CSS 中絕不隨便刪除 outline，確保使用 Tab 鍵切換頁面時，視力較弱的使用者能清楚看到目前光標停留在哪一個按鈕。
馬卡龍色系的對比度管理：雖然採用溫柔淡雅的馬卡龍風格，但文字顏色堅持使用高對比度的深灰色，提升閱讀舒適度。